<template>
  <view>
    <cu-custom bgColor="bg-color-hui" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">客户详情</block>
    </cu-custom>
    <view class="header">
      <view class="u-f-ac u-f-jsb">
        <view class="user_msg u-f">
          <view class="avatar text-overflow u-f-ajc">{{ res.nickName || res.username }}</view>
          <view>
            <view style="margin: 10rpx 0;"><text style="margin-right: 20rpx;">{{ res.nickName || res.username }}</text><text>{{res.phone}}</text></view>
            <view style="font-size: 22rpx;"><text style="margin-right: 20rpx;">{{res.birthday ? res.birthday.substring(0, 10) : '----'}}</text><text>{{ages(res.birthday)+'岁'}}</text></view>
          </view>
        </view>
        <view class="edit_details <u-f></u-f>-ajc">编辑详情</view>
      </view>
      <view class="remark u-f-ac u-f-jsb">
        <view style="width: 85%;">备注：这里是我的个人备注</view>
        <view class="cuIcon-right"></view>
      </view>
    </view>
    <view style="padding: 30upx;flex-wrap: wrap;" class="u-f-ac u-f-jsb common-use">
      <view style="margin: 0upx 15upx 30upx 15upx;" v-for="(item,index) in menus" :key='index'>
        <view @click="jump" :data-src='item.path' style="width: 100upx;height: 100upx;overflow: hidden;position: relative;">
          <image style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 80%;height: 160upx;"
            :src="item.src" mode="widthFix"></image>
        </view>
        <view style="font-size: 20upx;color: #666;text-align: center;margin-top: 10upx;">
          {{item.title}}
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        res: {},
        id: '',
        openid: '',
        menus: [
          {
            title: '问卷调查',
            src: '/static/schedule.png',
            path: '/pagesA/Questionnaire/Questionnaire'
          },
          {
            title: '身体测试',
            src: '/static/ic_body_test_2.png',
            path: '/pagesA/Physical_test/Test_report'
          },
          {
            title: '训练方案',
            src: '/static/ic_training_program_2.png',
            path: '/pagesA/Training_program/Project_details'
          },
          {
            title: '备课计划',
            src: '/static/ic_training_workout_2.png',
            path: '/pagesA/Preparation_plan/Project_details'
          },
          {
            title: '静态评估',
            src: '/static/ic_attitude_assessment_2.png',
            path: '/pagesA/Static_evaluation/Static_evaluation'
          },
        ]
      }
    },
    onLoad(e) {
      this.id = e.id
      let that = this;
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          that.openid = res.data
          that.setajax()
        },
        fail: () => {}
      });
    },
    methods: {
      ages(birthday) {
        const date = new Date();
        return birthday ? date.getFullYear() - birthday.substring(0, 4) : '---'
      },
      async setajax() {
        let res = await this.$myRuquest({
          url: "/coach/members/getCoachMembersInfo",
          data: {
            'userId': this.id,
            'coachId': uni.getStorageSync("openid"),
          }
        })
        this.res = res.data.datas
        uni.setStorageSync('phyUser', res.data.datas)
      },
      async submit() {
        let res = await this.$myRuquest({
          url: "/coach/members/updateMembers",
          method: "POST",
          data: {
            'userId': this.id,
            "nickName": this.res.nickName
          },
        })
        if (res.data.result == 200) {
          uni.showToast({
            title: "保存成功~"
          })
          uni.redirectTo({
            url: '../../pages/basics/home'
          })
        }
      },
      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },
    }
  }
</script>

<style lang="scss">
  .header {
    width: 100%;
    background-color: #4B505F;
    color: #FFFFFF;
    padding: 0 20rpx 20rpx;

    .edit_details {
      background-color: #39BB9E;
      border-radius: 50rpx;
      padding: 10rpx 30rpx;
      font-size: 26rpx;
    }

    .user_msg {
      padding: 30rpx 0;
      border-bottom: 1px solid #555;
    }

    .avatar {
      width: 90rpx;
      height: 90rpx;
      background-color: $uni-color-zhuti;
      border-radius: 100%;
      margin-right: 20rpx;
    }

    .remark {
      padding: 20rpx 0 10rpx;
      color: #999;
    }
  }

  .common-use {
    border-bottom: 2px solid #eee;
  }

  .bg-color-hui {
    background-color: #4B505F;
    color: #FFFFFF;
  }
</style>
